<template>
  <div 
    v-loading="loading"
    class="like"
    element-loading-text="正在加载..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
    :element-loading-body="true"
    element-loading-customClass="mask"
  >
    <div class="connter">
      <div class="down_top_nav">
        <div
          v-for="(item,index) in TimeList"
          :key="index"
          class="down_top_nav_item"
          :class="[Active === item.id?'down_top_nav_active':'']"
          @click="TabActive(item.id, item.type)"
        >
          <span style="margin-top:1rem">{{ item.name }}</span>
          <span>{{ item.checkname }}</span>
          <span
            :class="[Active === item.id?'sanjiao':'nosanjiao']"
          />
        </div>
      </div>
      <div class="down_top_body">
        <div class="goods-list">
          <div
            v-for="item in likeList"
            :key="item.id"
            class="goods-item"
            @click="todetail(item)"
          >
            <div class="goods-img">
              <img
                :src="item.defaultAlbum"
                alt=""
              >
            </div>
            <div class="goods-info">
              <div class="name">
                {{ item.cProductShowName }}{{ item.cModelDescription }}
              </div>
              <div class="describe">
                三种规格收纳杂物
              </div>
              <div class="progress_box">
                <el-progress
                  :percentage="100"
                  :format="format"
                  color="#49c1af"
                />
              </div>
              <div class="price">
                <span class="titel">限时购</span>￥{{ item.fSalePrice }}<span class="yj">￥29.9</span>
              </div>
              <div class="footer-button">
                <div
                  v-if="ActiveType === '1'"
                  class="button"
                  @click="Immediately"
                >
                  立即抢购
                </div>
                <div
                  v-else
                  class="unbutton"
                >
                  即将开抢
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    shopid: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      likeList: [],
      page: 1,
      Active: '1',
      ActiveType: '1',
      loading: true,
      TimeList: [{
        id:'1',
        name:'10:00',
        type: '1',
        checkname: '已开抢'
      },{
        id:'2',
        name:'11:00',
        type: '2',
        checkname: '即将开始'
      },{
        id:'3',
        name:'12:00',
        type: '2',
        checkname: '即将开始'
      },{
        id:'4',
        name:'13:00',
        type: '2',
        checkname: '即将开始'
      },{
        id:'5',
        name:'14:00',
        type: '2',
        checkname: '即将开始'
      },{
        id:'6',
        name:'16:00',
        type: '2',
        checkname: '即将开始'
      }]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 剩余数进度条
    format(percentage) {
      return percentage === percentage ? `还剩${percentage}件` : `还剩0件`;
    },
    //获取列表
    getData() {
      let params = {
        queryCondition: {
          order: [
            {
              fieldname: "iOrder",
              direction: "asc",
            },
          ],
          pagesize: 20,
          pageindex: this.page,
          where: [
            {
              fieldname: "goods_id_exclude",
              valuefrom: "",
            },
            {
              fieldname: "categoryid",
              valuefrom: "",
            },
            {
              fieldname: "type",
              valuefrom: 1,
            },
          ],
        },
      };
      this.$api.home.getRecommendCartList(params).then((res) => {
        if (res.code == 200) {
          // console.log(res.data);
          let more = res.data.data.length % 4;
          this.likeList = res.data.data.splice(more);
          this.loading = false
        }
      });
    },
    todetail(item) {
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: item.pid,
          iShopId: item.iShopId
        },
      });
    },
    getmore() {
      this.page++;
      this.getData();
    },
    // tab切换
    TabActive(TabActive, ActiveType) {
      this.Active = TabActive
      this.ActiveType = ActiveType
    },
    // 立即抢购
    Immediately() {
      console.log('立即抢购')
    }
  },
};
</script>

<style scoped lang="scss">
.like {
  // padding: 0 16.19rem;
  // display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: -6rem;
  width: 100%;
  .connter{
    position: relative;
    bottom: 6rem;
    width: 100%;
    z-index: 999;
    .down_top_nav{
      height: 6rem;
      padding: 0 16.19rem;
      color: #fff;
      display: flex;
      margin: 0 auto;
      justify-content: center;
      background: rgba($color: #000000, $alpha: 0.5);
      .down_top_nav_item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        height: 6rem;
        padding:0 5rem;
        margin: 0 auto;
        cursor: pointer;
        span{
          margin:.2rem 0;
        }
        .sanjiao{
          width: 0px;
          height: 0px;
          margin: 0 auto;
          position: relative;
          top: 1.7rem;
          border:1rem solid ;
          border-top-color: #f3406f;
          border-bottom: none;
          border-left-color:rgba(255,255,255,0);
          border-right-color:rgba(255,255,255,0);
        }
        .nosanjiao{
          width: 0px;
          height: 0px;
          margin: 0 auto;
          position: relative;
          top: 1.7rem;
          border:1rem solid #eaeaea;
          border-top-color:#eaeaea;
          border-bottom: none;
          border-left-color:rgba(255,255,255,0);
          border-right-color:rgba(255,255,255,0);
        }
      }
      .down_top_nav_active{
        background: #f3406f;
        cursor: pointer;
      }
    }
    .down_top_body{
      color: #f3406f;
      padding: 0 16.19rem;
      display: flex;
      margin: 2rem auto;
      .goods-list {
        margin-top: 1.88rem;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        .goods-item {
          width: 24%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 1.3333333%;
          margin-bottom: 2.38rem;
          cursor: pointer;

          &:nth-child(4n) {
            margin-right: 0;
          }

          .goods-img {
            width: 100%;
            height: 20.94rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;

            img {
              width: 16rem;
              height: 16rem;
              object-fit: contain;
            }
          }

          .goods-info {
            width: 17.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            // margin-top: 1.5rem;
            background: #fff;
            .name {
              font-size: 1.13rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(0, 0, 0, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 90%;
              margin: 0 auto;
              text-align: center;
            }
            .describe{
              font-size: .9rem;
              font-weight: 400;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
              width: 100%;
              margin: .8rem auto 0 auto;
            }
            .progress_box{
              width: 100%;
              margin: .8rem auto 0 auto;
              text-align: center;
            }
            .price {
              font-size: 1.5rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(243, 64, 111, 1);
              margin-top: 0.75rem;
              text-align: center;
              margin: .8rem auto;
              .titel{
                font-size: .9rem;
                color: #32b2a1;
              }
              .yj{
                 font-size: .9rem;
                 margin-left: 1rem;
                 color: #959595;
                 text-decoration:line-through;
              }
            }
            .footer-button{
              display: flex;
              align-items: center;
              justify-content: center;
              height: 4rem;
              width: 50%;
              text-align: center;
              margin: 0 auto;
              .button{
                width: 8rem;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 20px;
                color: #fff;
                background: #f0406f;
              }
              .unbutton{
                width: 8rem;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 20px;
                color: #fff;
                background: #b2b2b2;
              }
            }
          }
        }
      }
    }
  }
  
}
</style>
<style>
.el-progress-bar{
  width: 70% !important;
}
.el-progress__text{
  font-size: .5rem !important;
}
</style>